<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>焦点图左右移动</title>
<style>
body,ul,ol{margin:0;padding:0;}
li{ list-style:none;}
img{ border:none; vertical-align:top; }
#box{width:470px;height:150px; position:relative; margin:30px auto; overflow:hidden;}
ul{ width:470px; position:absolute;left:0; top:0; z-index:1;}
ul li{width:470px; position:absolute; left:0; top:0;}
ol{z-index:2; width:120px; position:absolute;right:10px; bottom:10px;}
ol li{ width:20px;height:20px; float:left;margin:0 2px; display:inline; background:#fff; color:#f60; line-height:20px; text-align:center;}
ol .active{ background:#f60; color:#fff;}
</style>
<script src="__PUBLIC__/js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/move.js"></script>
<script>

//可视区，其余隐藏图片放置在左右,以绝对定位隐藏，选中区域大于当前定位，则当前页面左移，否则小于当前定位则右移
/*
window.onload = function(){
	var oOl = document.getElementsByTagName('ol')[0];
	var aLiOl = oOl.getElementsByTagName('li');
	
	var oUl = document.getElementsByTagName('ul')[0];
	var aLiUl = oUl.getElementsByTagName('li');
	
	var iWidth = aLiUl[0].offsetWidth;
	var iNow = 0;
	
	for(var i=1;i<aLiUl.length;i++){
		aLiUl[i].style.left = iWidth + 'px';
	}
	
	for(var i=0;i<aLiOl.length;i++){
		aLiOl[i].index = i;
		aLiOl[i].onmouseover = function(){
			for(var i=0;i<aLiOl.length;i++){
				aLiOl[i].className = '';
			}
			this.className = 'active';
			if(this.index > iNow){
				aLiUl[this.index].style.left = iWidth + 'px';
				startMove( aLiUl[iNow] , { left : -iWidth } );
			}
			else if( this.index < iNow ){
				aLiUl[this.index].style.left = -iWidth + 'px';
				startMove( aLiUl[iNow] , { left : iWidth } );
			}
			
			startMove( aLiUl[this.index] , { left : 0 } );
			iNow = this.index;
			
		};
	}
};
*/


$(document).ready(function(){
	var oli = $("#box").find("ol").find("li");
	var iWidth = $("#box").find("ul").find("li").width();
	var iNow = 0;
	var uli = $("#box").find("ul").find("li");
	for(var i=1;i < uli.length;i++){
		uli.eq(i).css("left",iWidth + "px");
	}
	
	oli.mouseover(function(){
		var index = oli.index($(this));
		//oli切换
		oli.attr("class","");
		$(this).attr('class','active');
		//左边移动
		$("#box").find("ul").find("li:gt(" + iNow +")").css("left",iWidth + 'px');
		//右边移动
		$("#box").find("ul").find("li:lt(" + iNow +")").css("left",-iWidth + 'px');
		if(index > iNow){
			startMove(uli.eq(iNow)[0], { left : -iWidth } );
		}else if(index < iNow){
			startMove(uli.eq(iNow)[0], { left : iWidth } );
		}
		startMove(uli.eq(index)[0] , { left : 0 } );
		iNow = index;	
	});	
});





</script>
</head>
<body>
<div id="box">
	<ul>
    	<li style="display:block; filter:alpha(opacity=100); opacity:1;"><img src="__PUBLIC__/images/1.jpg" alt=""/></li>
        <li><img src="__PUBLIC__/images/2.jpg" alt=""/></li>
        <li><img src="__PUBLIC__/images/3.jpg" alt=""/></li>
        <li><img src="__PUBLIC__/images/4.jpg" alt=""/></li>
        <li><img src="__PUBLIC__/images/5.jpg" alt=""/></li>
    </ul>
    <ol>
    	<li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ol>
</div>
</body>
</html>
